<template>
  <section>
    <!--工具条-->
    <search-bar>
      <el-row :span="24">
        <el-col :span="8">
          <el-form-item label="群组名称">
            <el-input placeholder="请输入群组名称" v-model="personalGroupFilter"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </search-bar>

    <!-- 操作 -->
    <el-col :span="24" style="margin-bottom: 10px">
      <el-button type="primary" @click="handleAdd">创建用户分群</el-button>
      <el-button type="primary" @click="resetCondition" style="float: right">重置</el-button>
      <el-button type="primary" v-on:click="getTableData" style="float: right">查询</el-button>
    </el-col>

    <!--列表-->
    <el-table :data="personalGroupTable" highlight-current-row border
               style="width: 100%;">
      <el-table-column type="index" min-width="80px" label="序号"></el-table-column>
      <el-table-column prop="groupName" label="群组名称" min-width="100px"></el-table-column>
      <el-table-column prop="groupDescription" label="群组描述" min-width="100px"></el-table-column>
      <el-table-column prop="personalGroupType" label="分组类型" min-width="100px">
        <template slot-scope="scope">
          <label v-if="scope.row.personalGroupType == 'PERSONAL_GROUP'">按客户分组</label>
        </template>
      </el-table-column>
      <el-table-column prop="createdDate" label="创建日期" min-width="100px">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click.native="editPersonalGroup(scope.row)">编辑</el-button>
          <el-button type="danger" @click.native="deletPersonalGroup(scope.row)">删除</el-button>
          <el-button type="primary" @click.native="addPersonals(scope.row)">指定用户</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total" style="float: right">
      </el-pagination>
    </el-col>

    <!-- 弹窗 -->
    <el-dialog :title="dialogTitle" size="tiny" width="500px" :visible.sync="myFormVisible"
               :close-on-click-modal="false">
      <el-form :model="myForm" :rules="rules" label-width="80px" ref="myForm">
        <el-form-item label="群组名称" prop="groupName">
          <el-input v-model="myForm.groupName" auto-complete="off" placeholder="请输入群组名称"></el-input>
        </el-form-item>
        <el-form-item label="群组描述" prop="groupDescription">
          <el-input v-model="myForm.groupDescription" auto-complete="off" placeholder="请简单描述该群组" type="textarea"
                    :row="2" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="分组类型" prop="personalGroupType">
            <el-radio-group v-model="myForm.personalGroupType">
              <el-radio label="PERSONAL_GROUP">按客户分组</el-radio>
              <!--<el-radio label="aaa">按地区分组</el-radio>-->
              <!--<el-radio label="bbb">按系统分组</el-radio>-->
            </el-radio-group>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="myFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="handleSubmit" :loading="submitLoading">提交</el-button>
      </div>
    </el-dialog>
    <personal-group-add ref="personalGroupAdd" @comfirmSuccess="comfirmSuccess"></personal-group-add>
    <personal-group-manual-add ref="personalGroupManualAdd" @addSuccess="addSuccess"></personal-group-manual-add>
  </section>
</template>

<script>
import {
  getAllPersonalGroups,
  createPersonalGroup,
  updatePersonalGroup,
  deletePersonalGroup
} from '../../api/v3/PersonalGroup';
import PersonalGroupAdd from './PersonalGroupAdd.vue';
import PersonalGroupManualAdd from './PersonalGroupManualAdd.vue';

export default {
  components: {
    PersonalGroupManualAdd,
    PersonalGroupAdd},
  data () {
    return {
      selectedForm: {},
      addPersonalGroup: '',
      personalGroupTable: [],
      personalGroupFilter: null,
      myFormVisible: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogTitle: '新增',
      selected: {},
      submitLoading: false,
      filters: '',
      // 表单数据
      myForm: {
        'groupName': null,
        'groupDescription': null,
        'personalGroupType': null
      },
      // 验证规则
      rules: {
        groupName: [
          {required: true, message: '请输入群组名称', trigger: 'blur'}
        ],
        groupDescription: [
          {required: true, message: '请输入群组描述', trigger: 'blur'}
        ],
        personalGroupType: [
          {required: true, message: '请选择分组类型', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    addPersonals (val) {
      this.selected = val;
      this.$refs.personalGroupAdd.show(val);
    },
    comfirmSuccess (o) {
      this.$refs.personalGroupManualAdd.show(this.selected);
    },
    addSuccess (o) {
      this.$refs.personalGroupAdd.show(this.selected);
    },
    getTableData () {
      this.filters = '';
      if (this.personalGroupFilter !== null && this.personalGroupFilter !== '' && this.personalGroupFilter !== undefined) {
        this.filters = 'LIKE_groupName=' + this.personalGroupFilter;
      }
      getAllPersonalGroups({
        filters: this.filters,
        sort: 'createdDate,desc',
        size: this.pageSize,
        page: this.currentPage - 1
      }).then(res => {
        this.personalGroupTable = res.data;
        this.total = Number(res.headers['x-total-count']);
      });
    },
    handleAdd () {
      this.myFormVisible = true;
      this.resetForm();
    },
    handleSubmit () {
      if (this.myForm.groupName === undefined || this.myForm.groupName === null || this.myForm.groupName === '') {
        this.$message.error('群组名称不能为空');
        return;
      }
      if (this.myForm.groupDescription === undefined || this.myForm.groupDescription === null || this.myForm.groupDescription === '') {
        this.$message.error('群组描述不能为空');
        return;
      }
      if (this.myForm.personalGroupType === undefined || this.myForm.personalGroupType === null || this.myForm.personalGroupType === '') {
        this.$message.error('分组类型不能为空');
        return;
      }
      if (this.dialogTitle === '新增') {
        createPersonalGroup(this.myForm).then((res) => {
          this.$message.success('添加成功');
          this.myFormVisible = false;
          this.getTableData();
        });
      } else {
        updatePersonalGroup(this.myForm).then((res) => {
          this.$message.success('编辑成功');
          this.myFormVisible = false;
          this.getTableData();
        });
      }
    },
    editPersonalGroup (val) {
      this.$confirm('编辑后,之前指定的会员列表即清空。确认编辑？', '提示', {
        type: 'warning'
      }).then(() => {
        this.dialogTitle = '编辑';
        this.myFormVisible = true;
        this.myForm = Object.assign({}, val);
      });
    },
    deletPersonalGroup (val) {
      this.$confirm('确认删除该用户群组？', '提示', {
        type: 'warning'
      }).then(() => {
        deletePersonalGroup(val.id).then(res => {
          this.$message.success('删除成功');
          this.getTableData();
        });
      });
    },
    // 重置表单
    resetForm () {
      if (this.$refs.myForm) {
        this.$refs.myForm.resetFields();
      }
      // 当先点击修改，再点击新增，会出现值没有清空,修复处理
      for (let p in this.myForm) {
        if (this.myForm[p] instanceof Array) {
          this.myForm[p] = [];
        } else {
          this.myForm[p] = null;
        }
      }
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.getTableData();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.getTableData();
    },
    // 重置查询条件
    resetCondition () {
      this.personalGroupFilter = '';
    }
  },
  // 初始化数据
  mounted () {
    this.$store.commit('initDict');
    this.getTableData();
  }
};
</script>

<style lang="less">
  .mButton {
    margin-bottom: 10px;
  }

  .mButtonRight {
    float: right;
    margin-right: 10px;
  }
</style>
